<template>
  <el-dialog
    title="产品"
    :visible.sync="dialogShow"
    width="80%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div>
      <search-form
        ref="searchForm"
        :search-config="searchConfig"
        :label-width="100"
        @search="handleSearch"
      />
    </div>
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane label="全部" name="all">
        <div class="table-list-box">
          <el-table
            ref="multipleTable"
            v-loading="tableLoading"
            :data="tableData"
            border
            max-height="220"
            header-row-class-name="table-list-header"
            :row-class-name="tableRowClassName"
            tooltip-effect="dark"
            style="width: 100%"
            @row-click="selectRow"
            @select="selectTable"
            @select-all="selectionAll"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="productCode" label="产品编码" width="120" show-overflow-tooltip />
            <el-table-column prop="productName" label="产品描述" show-overflow-tooltip />
            <el-table-column prop="prodModelCode" label="型号" width="120" show-overflow-tooltip />
            <el-table-column prop="productCategoryName" label="品类" width="140" show-overflow-tooltip />
            <el-table-column prop="saleSeriesName" label="产品系列" width="120" show-overflow-tooltip />
            <!-- <el-table-column prop="proPosition" label="产品定位" width="120" /> -->
          </el-table>
        </div>
        <div class="pagination-box">
          <div class="pagination-container">
            <el-pagination
              :current-page.sync="currentPage"
              :page-sizes="pageSizelist"
              :page-size="pageSize"
              layout="sizes, prev, pager, next, slot"
              :total="allTotal === 0 ? total : allTotal"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
              <span class="el-pagination__jump">前往
                <el-input-number
                  v-model="jumpPage"
                  :controls="false"
                  :min="1"
                  @blur="showEnter"
                  @keyup.enter.native="showEnter"
                />页</span>
            </el-pagination>
            <div v-show="total <= pageSize" class="pagination-info">当前显示
              <span>{{ handlePageRange(pageSize, currentPage) }}</span>，共
              <span class="total"> {{ tableData.length }} </span> 条记录
            </div>
            <div v-show="total > pageSize" class="pagination-info">当前显示
              <span>{{ handlePageRange(pageSize, currentPage) }}</span>，共
              <span :class="[allTotal === 0 && total !== 0 ? 'total next-page': 'total']" @click="newEnter"> {{ allTotal === 0 && total !== 0 ? total-1 +'+': allTotal }}  </span> 条记录
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`已选择(${selectedData.length})`" name="selected">
        <div class="table-list-box">
          <el-table
            ref="chosenTable"
            :data="showSelectedData"
            border
            max-height="220"
            header-row-class-name="table-list-header"
            highlight-current-row
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="productCode" label="产品编码" width="120" show-overflow-tooltip />
            <el-table-column prop="productName" label="产品描述" show-overflow-tooltip />
            <el-table-column prop="prodModelCode" label="型号" width="120" show-overflow-tooltip />
            <el-table-column prop="productCategoryName" label="品类" width="140" show-overflow-tooltip />
            <el-table-column prop="saleSeriesName" label="产品系列" width="120" show-overflow-tooltip />
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color:#3dc094; cursor: pointer;"
                  @click="deleteChose(scope.$index,scope.row)"
                >删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- <div style="margin:10px 0;display:inlnk-black;font-size: 14px;">已选择
      <span style="color:#0f3eea;">{{ selectedData.length }}</span>条数据
    </div> -->

    <div slot="footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="mini" @click="determineChosen">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryProductList, queryCategoryData, queryBigStyleData } from '@/api/proConfig'
export default {
  name: 'BatSelect',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: [String, Object],
      default: ''
    },
    otherFilter: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      activeName: 'all',
      showSelectedData: [],
      list: [],
      bigStyleList: [],
      tableLoading: false,
      searchConfig: [
        { label: '产品编码', prop: 'productCode', type: 'text', value: '', placeholder: '' },
        { label: '产品描述', prop: 'productName', type: 'text', value: '', placeholder: '', single: true },
        {
          label: '型号',
          prop: 'prodModelCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post', // 远程搜索请求方式
            remoteUrl: `/select-service/api/v1/productModel/page`, // 远程搜索API地址
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name', // productSaleSeriesName
              value: 'code' // code
            }, // api返回数据默认字段
            multiple: false
          },
          dialogConfig: {
            title: '型号',
            interfacePath: '/select-service/api/v1/productModel/page',
            setting: [
              { prop: 'code', title: '系列编码' },
              { prop: 'name', title: '系列名称' }
            ]
          }
        },
        {
          label: '品类',
          prop: 'productCategoryCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post', // 远程搜索请求方式
            remoteUrl: `/select-service/api/v1/productCategory/page`, // 远程搜索API地址
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name', // productSaleSeriesName
              value: 'code' // code
            }, // api返回数据默认字段
            multiple: false
          },
          dialogConfig: {
            title: '品类',
            interfacePath: '/select-service/api/v1/productCategory/page',
            setting: [
              { prop: 'code', title: '系列编码' },
              { prop: 'name', title: '系列名称' }
            ]
          }
        },
        {
          label: '产品系列',
          prop: 'saleSeriesCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post', // 远程搜索请求方式
            remoteUrl: `/select-service/api/v1/productSaleSeries/page`, // 远程搜索API地址
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name', // productSaleSeriesName
              value: 'code' // code
            }, // api返回数据默认字段
            multiple: false
          },
          dialogConfig: {
            title: '系列',
            interfacePath: '/select-service/api/v1/productSaleSeries/page',
            setting: [
              { prop: 'code', title: '系列编码' },
              { prop: 'name', title: '系列名称' }
            ]
          }
        }
      ],
      pageSize: 10,
      pageSizelist: [5, 10, 15, 20],
      currentPage: 1,
      total: '',
      jumpPage: '',
      allTotal: 0,
      selectedData: [],
      tableData: [],
      otherFilters: [{ 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
        { 'id': 'customizeType', 'property': 'customizeType', 'operator': '=', 'value': 'NORM' },
        { 'id': 'isSaleProduct', 'property': 'isSaleProduct', 'operator': '=', 'value': '1' },
        { 'id': 'canBePurchase', 'property': 'canBePurchase', 'operator': '=', 'value': '1' }],
      formData: {
        seriesName: '',
        seriesCode: '',
        productName: '',
        productRadio: '1',
        productCode: '' // 62323901101 669325001
      },
      productList: {
        show: false,
        text: '123'
      },
      filterRow: []
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.selectedData = []
          this.$nextTick(() => {
            this.$refs.multipleTable.clearSelection()
          })
        }
      }
    }
  },
  created() {
    this.modelListAll(1, this.pageSize, false)
  },
  mounted() {},
  methods: {
    // // 清空搜索条件
    // clearSearch(data) {
    //   this.otherFilters = [
    //     { 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
    //     { 'id': 'customizeType', 'property': 'customizeType', 'operator': '=', 'value': 'NORM' },
    //     { 'id': 'isSaleProduct', 'property': 'isSaleProduct', 'operator': '=', 'value': '1' },
    //     { 'id': 'canBePurchase', 'property': 'canBePurchase', 'operator': '=', 'value': '1' }
    //   ]
    //   // this.currentPage = 1
    //   // this.pageSize = 5
    // },
    // 获取搜索条件
    handleSearch(data) {
      const otherArr = [
        { 'id': 'proState', 'property': 'proState', 'operator': '=', 'value': 'E' },
        { 'id': 'customizeType', 'property': 'customizeType', 'operator': '=', 'value': 'NORM' },
        { 'id': 'isSaleProduct', 'property': 'isSaleProduct', 'operator': '=', 'value': '1' },
        { 'id': 'canBePurchase', 'property': 'canBePurchase', 'operator': '=', 'value': '1' }
      ]
      // const modelAndCategoryParams = []
      // const filtersRaw = []
      let proCodeArr = []
      let modelArr = []
      if (this.detailData.otherFilter) {
        this.detailData.otherFilter.forEach(item => {
          // const obj = {
          //   productModel: item.modelCode,
          //   productCategoryCode: item.categoryCodes
          // }
          // modelAndCategoryParams.push(obj)
          if (item.productCode && item.productCode.length) {
            const tmpArr = this.detailData.otherFilter.filter(c => c.productCode && c.productCode.length)
            const productCodeArr = tmpArr.map(c => c.productCode)
            const proModelArr = this.detailData.otherFilter.filter(c => c.modelCode && c.modelCode.length)
            const prodModelArr = proModelArr.map(c => c.modelCode)
            if (productCodeArr.length) {
              const codeStr = '[' + productCodeArr.join(',') + ']'
              proCodeArr = [{ 'id': 'productCode', 'property': 'productCode', 'operator': 'not in', 'value': codeStr }]
            }
            if (prodModelArr.length) {
              const modelCodeStr = '[' + prodModelArr.join(',') + ']'
              modelArr = [{ 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': 'not in', 'value': modelCodeStr }]
            }
          }
        })
      }
      this.filterRow = [...data.filtersRaw]
      const filterRow = [...otherArr, ...data.filtersRaw, ...proCodeArr, ...modelArr]
      this.currentPage = 1
      this.pageSize = 10
      if (this.activeName === 'all') {
        const dtos = new FormData()
        dtos.append('page', this.currentPage)
        dtos.append('rows', this.pageSize)
        dtos.append('pageFlag', true)
        dtos.append('onlyCountFlag', false)
        dtos.append('filtersRaw', JSON.stringify(filterRow))
        this.onParams(dtos)
      } else {
        if (!this.selectedData.length) return
        if (data.filtersRaw && data.filtersRaw.length) {
          const arr = []
          this.selectedData.forEach(item => {
            const productCodeList = data.filtersRaw.filter(item => item.property === 'productCode')
            const productNameList = data.filtersRaw.filter(item => item.property === 'productName')
            const productModelList = data.filtersRaw.filter(item => item.property === 'productModel')
            const saleSeriesList = data.filtersRaw.filter(item => item.property === 'saleSeriesCode')
            const categoryList = data.filtersRaw.filter(item => item.property === 'productCategoryCode')
            let flag1 = true
            let flag2 = true
            let flag3 = true
            let flag4 = true
            let flag5 = true
            if (productCodeList.length) {
              if (productCodeList[0].operator === 'like') {
                flag1 = (item.productCode.search(productCodeList[0].value) !== -1)
              } else {
                const proCode = JSON.parse(productCodeList[0].value)
                flag1 = proCode.includes(Number(item.productCode))
              }
            }
            if (productNameList.length) {
              flag2 = (item.productName.search(productNameList[0].value) !== -1)
            }
            if (productModelList.length) {
              flag3 = (item.productModel === productModelList[0].value)
            }
            if (saleSeriesList.length) {
              flag4 = (item.saleSeriesCode === saleSeriesList[0].value)
            }
            if (categoryList.length) {
              flag5 = (item.productCategoryCode === categoryList[0].value)
            }
            if (flag1 && flag2 && flag3 && flag4 && flag5) {
              arr.push(item)
            }
          })
          this.showSelectedData = arr
        } else {
          this.showSelectedData = this.selectedData
        }
      }
    },
    modelListAll(currentPage, rows, onlyCountFlag) {
      this.tableLoading = true
      // const modelAndCategoryParams = []
      let filtersRaw = []
      // if (this.detailData.otherFilter) {
      this.detailData.otherFilter.forEach(item => {
        // const obj = {
        //   productModel: item.modelCode,
        //   productCategoryCode: item.categoryCodes
        // }
        // modelAndCategoryParams.push(obj)
        // if (item.configDetailDtos && item.configDetailDtos.length) {
        let proCodeArr = []
        let modelArr = []
        const tmpArr = this.detailData.otherFilter.filter(c => c.productCode && c.productCode.length)
        const productCodeArr = tmpArr.map(c => c.productCode)
        const proModelArr = this.detailData.otherFilter.filter(c => c.modelCode && c.modelCode.length)
        const prodModelArr = proModelArr.map(c => c.modelCode)
        if (productCodeArr.length) {
          const codeStr = '[' + productCodeArr.join(',') + ']'
          proCodeArr = [{ 'id': 'productCode', 'property': 'productCode', 'operator': 'not in', 'value': codeStr }]
        }
        if (prodModelArr.length) {
          const modelCodeStr = '[' + prodModelArr.join(',') + ']'
          modelArr = [{ 'id': 'prodModelCode', 'property': 'prodModelCode', 'operator': 'not in', 'value': modelCodeStr }]
        }
        filtersRaw = [...proCodeArr, ...modelArr]
        // filtersRaw = [...modelArr]
        // }
      })
      // }
      // const dtos = {
      //   modelAndCategoryParams: modelAndCategoryParams,
      //   queryParams: {
      //     page: currentPage,
      //     rows: rows,
      //     pageFlag: true,
      //     onlyCountFlag: onlyCountFlag,
      //     // filtersRaw: JSON.stringify([...this.otherFilters, ...this.filterRow])
      //     filtersRaw: JSON.stringify([...filtersRaw, ...this.otherFilters, ...this.filterRow])
      //   }
      // }
      const dtos = new FormData()
      dtos.append('page', currentPage)
      dtos.append('rows', rows)
      dtos.append('pageFlag', true)
      dtos.append('onlyCountFlag', onlyCountFlag)
      dtos.append('filtersRaw', JSON.stringify([...this.otherFilters, ...this.filterRow, ...filtersRaw]))
      queryProductList(dtos).then(res => {
        if (res.success && res.data && res.data.records) {
          if (!onlyCountFlag) {
            this.tableData = res.data.records
            this.total = res.data.total
            if (this.total <= this.currentPage * this.pageSize) {
              this.allTotal = this.total
            }
            const selectIds = this.selectedData.map(e => {
              return e.productCode
            })
            // 表格数据对比是否存在已选择数据并对其勾选
            this.tableData.forEach(item => {
              if (selectIds.includes(item.productCode)) {
                this.$nextTick(() => {
                  this.$refs.multipleTable.toggleRowSelection(item)
                })
              }
            })
          } else {
            this.allTotal = res.data.total
            this.total = res.data.total
            this.currentPage = res.data.page
          }
        }
        this.showSelectedData = this.selectedData
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 去重
    unique(arr, flag) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr[flag]) && res.set(arr[flag], 1))
    },
    removeEqualData(arr) {
      const newArr = []
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
      return newArr
    },
    // 获取品类
    async getCategoryData(arr) {
      const codes = '[' + arr.join(',') + ']'
      const filterRow = [{ 'id': 'code', 'property': 'code', 'operator': 'in', 'value': codes }]
      const dataForm = new FormData()
      dataForm.append('pageFlag', false)
      dataForm.append('filtersRaw', JSON.stringify(filterRow))
      await queryCategoryData(dataForm).then(res => {
        if (res.success) {
          this.list = res.data.records
        }
      })
    },
    // 获取专区
    async getBigStyleData(arr) {
      const codes = '[' + arr.join(',') + ']'
      const filterRow = [{ 'id': 'seriesCode', 'property': 'seriesCode', 'operator': 'in', 'value': codes }]
      const dataForm = new FormData()
      dataForm.append('pageFlag', false)
      dataForm.append('filtersRaw', JSON.stringify(filterRow))
      await queryBigStyleData(dataForm).then(res => {
        if (res.success) {
          this.bigStyleList = res.data.records
        }
      })
    },
    // 确定
    async determineChosen() {
      if (!this.selectedData.length) {
        this.$message.warning('请选择产品')
        return
      }
      // const prodPicDetail = []
      const equalArr = []
      const equalArr2 = []
      const tmpSelectList = JSON.parse(JSON.stringify(this.selectedData))
      this.selectedData.forEach((select, sIndex) => {
        tmpSelectList.forEach((t, tindex) => {
          if (sIndex !== tindex && select.productCode === t.productCode) {
            equalArr.push(t)
          }
          if (sIndex !== tindex && select.prodModelCode === t.prodModelCode) {
            equalArr2.push(t)
          }
        })
      })
      if (equalArr.length) {
        const arr = this.unique(equalArr, 'productCode')
        arr.forEach(item => {
          // item.msg = `型号为${item.prodModelCode}，品类为${item.productCategoryName}的数据存在重复现象，请重新选择`
          item.msg = `产品编码为${item.productCode}，产品描述为${item.productName}的数据存在重复现象，请重新选择`
        })
        const msgArr = arr.map(a => a.msg)
        this.$message({
          dangerouslyUseHTMLString: true,
          message: msgArr.join('<br />'),
          type: 'warning'
        })
        return
      }
      if (equalArr2.length) {
        const arr = this.unique(equalArr2, 'prodModelCode')
        arr.forEach(item => {
          item.msg = `【型号${item.prodModelCode} ，品类${item.productCategoryName}】`
        })
        const msgArr = arr.map(a => a.msg)
        this.$confirm(msgArr.join(',') + '数据已存在，是否重复选择？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.confirmSubmit()
        }).catch(() => {
          this.$message.info('取消选择')
          return
        })
      } else {
        this.confirmSubmit()
      }
    },
    async  confirmSubmit() {
      const submitArr = []
      // if (this.detailData.otherFilter) {
      // const tmpArr = JSON.parse(JSON.stringify(this.detailData.otherFilter))
      // tmpArr.forEach(q => {
      // const obj = {
      //   // outpicCategoryNumberId: q.outpicCategoryNumberId,
      //   // belongRegion: q.belongRegion,
      //   categoryCodes: q.categoryCodes,
      //   seriesCode: q.seriesCode,
      //   spaceTotalArea: q.spaceTotalArea,
      //   spaceCode: q.spaceCode,
      //   styleCode: q.styleCode,
      //   configDetailDtos: []
      // }
      this.selectedData.forEach(item => {
        const finish = {
          // checked: false,
          categoryCodes: item.productCategoryCode,
          categoryNames: item.productCategoryName,
          seriesCode: item.saleSeriesCode,
          seriesName: item.saleSeriesName,
          modelCode: item.prodModelCode,
          modelName: item.prodModelCode,
          productCode: item.productCode,
          productDesc: item.productName,
          productState: item.proState,
          pcontrolState: item.canBePurchase,
          productNumber: 1,
          recommendType: 'OPTIONAL'
        }
        // if (item.productCategoryCode === q.categoryCodes && item.saleSeriesCode === q.seriesCode) {
        //   obj.configDetailDtos.push(finish)
        // }
        // obj.configDetailDtos.forEach(objItem => {
        //   this.$set(objItem, 'checked', false)
        // })
        submitArr.push(finish)
      })
      // })
      // }
      const plCodesArr = submitArr.map(item => item.categoryCodes)
      const styleCodesArr = submitArr.map(item => item.seriesCode)
      const plCodes = this.removeEqualData(plCodesArr)
      const styleCodes = this.removeEqualData(styleCodesArr)
      await this.getCategoryData(plCodes)
      const plDataArr = this.list
      await this.getBigStyleData(styleCodes)
      const bigStyleArr = this.bigStyleList
      submitArr.forEach(item => {
        plDataArr.forEach(row => {
          if ((item.categoryCodes === row.code) && row.parentCode) {
            item.categoryCodes = row.parentCode
            item.categoryNames = row.parentName
          }
        })
        bigStyleArr.forEach(row => {
          if (row.seriesCode === item.seriesCode) {
            item.styleCode = row.bigStyleCode
            item.styleName = row.bigStyleName
          }
        })
      })
      this.$emit('success', submitArr)
      this.handleClose()
      this.dialogShow = false
    },
    // 前往第几页
    showEnter(ev) {
      this.jumpPage = ev.srcElement.value
      this.getTotal(this.jumpPage)
    },
    // 获取总数据条数
    newEnter() {
      this.getTotal(this.currentPage)
    },
    // 当操作在非第一页时，跳回第一页
    jumpToFirstPage() {
      this.currentPage = 1 // 不在第一页搜索时，调回第一页显示
      this.jumpPage = 1
      this.allTotal = 0
      this.total = 0
    },
    // 分页，获取下一页数据
    handleCurrentChange(currentPage) {
      this.jumpPage = currentPage
      this.currentPage = currentPage
      this.$refs.multipleTable.clearSelection()
      this.$refs.chosenTable.clearSelection()
      this.modelListAll(this.currentPage, this.pageSize, false)
    },
    // 分页数据获取---> this.$refs.chosenTable/multipleTable.clearSelection
    handleSizeChange(val) {
      this.pageSize = val
      this.$refs.multipleTable.clearSelection()
      this.$refs.chosenTable.clearSelection()
      this.jumpToFirstPage()
      this.modelListAll(this.currentPage, this.pageSize, false)
    },
    // 计算当前数据范围 如:1-20
    handlePageRange(size, currentPage) {
      const start = size * (currentPage - 1) + 1
      const end = size * currentPage

      const pageRange = `${start}-${end}`
      return pageRange
    },
    // 获取数据总条数
    getTotal(val) {
      if (this.allTotal !== 0) return
      let page = this.currentPage
      if (val) {
        page = val
      }
      this.modelListAll(page, this.pageSize, true)
      this.$nextTick(() => {
        this.modelListAll(page, this.pageSize, false)
      })
    },
    setTBIndex({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    onParams(data) {
      this.tableLoading = true
      queryProductList(data).then(res => {
        if (res.success && res.data && res.data.records) {
          this.tableData = res.data.records
          this.total = res.data.total
          if (this.total <= this.currentPage * this.pageSize) {
            this.allTotal = this.total
          }
          const selectIds = this.selectedData.map(e => {
            return e.productCode
          })
          // 表格数据对比是否存在已选择数据并对其勾选
          this.tableData.forEach(item => {
            if (selectIds.includes(item.productCode)) {
              this.$nextTick(() => {
                this.$refs.multipleTable.toggleRowSelection(item)
              })
            }
          })
        }
        this.showSelectedData = this.selectedData
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleClose() {
      this.dialogShow = false
      this.$emit('update:visible', false)
    },
    selectionAll(val) {
      const selectIds = this.selectedData.map(e => {
        return e.productCode
      })
      val.length &&
        val.forEach(item => {
          if (!selectIds.includes(item.productCode)) {
            this.selectedData = this.selectedData.concat(item)
          }
        })
      if (!val.length) {
        this.tableData.forEach(item => {
          this.selectedData.forEach((s, index) => {
            if (s.productCode === item.productCode) {
              this.selectedData.splice(index, 1)
            }
          })
        })
      }
      this.showSelectedData = this.selectedData
    },
    // 产品数据手动勾选
    selectTable(val, row) {
      if (this.selectedData.length > 0) {
        // 筛选已勾选的code
        const codeList = val.map(e => {
          return e.productCode
        })
        if (codeList.includes(row.productCode)) {
          // 判断是勾选还是取消
          this.selectedData = this.selectedData.concat(row)
        } else {
          this.selectedData.forEach((item, index) => {
            if (item.productCode === row.productCode) {
              this.selectedData.splice(index, 1)
            }
          })
        }
      } else {
        this.selectedData = val
      }
      this.showSelectedData = this.selectedData
      this.$nextTick(() => {
        this.selectedData.forEach(item => {
          this.$refs.chosenTable.toggleRowSelection(item, true)
        })
      })
    },
    // 产品数据手动勾选
    selectRow(row) {
      if (this.selectedData.length > 0) {
        const arr = JSON.parse(JSON.stringify(this.selectedData))
        // 筛选已勾选的code
        const codeList = arr.map(e => {
          return e.productCode
        })
        if (!codeList.includes(row.productCode)) {
          // 判断是勾选还是取消
          this.selectedData = arr.concat(row)
          this.$nextTick(() => {
            this.selectedData.forEach(item => {
              this.$refs.multipleTable.toggleRowSelection(item, true)
            })
          })
        } else {
          this.selectedData.forEach(item => {
            if (item.productCode === row.productCode) {
              this.$refs.multipleTable.toggleRowSelection(item, false)
            }
          })
          this.$nextTick(() => {
            this.selectedData.forEach((item, index) => {
              if (item.productCode === row.productCode) {
                this.selectedData.splice(index, 1)
              }
            })
          })
        }
      } else {
        this.selectedData.push(row)
        this.$nextTick(() => {
          this.selectedData.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        })
      }
      this.showSelectedData = this.selectedData
    },
    deleteChose(index, row) {
      this.selectedData.splice(index, 1)
      this.$nextTick(() => {
        this.tableData.forEach(e => {
          if (e.productCode === row.productCode) {
            this.$refs.multipleTable.toggleRowSelection(e, false)
          }
        })
      })
      this.showSelectedData = this.selectedData
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.selectedData.filter(item => row.productCode === item.productCode)
      return (filterArr.length > 0) ? 'selected-highlight' : ''
    },
    changeTab(tab) {
      this.$refs.searchForm.handleSearch()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
